<template>
  <div class="charts">
    <div ref="chart" style="width:100%;height:376px"></div>
  </div>
</template>

<script>
export default {
  name: "Charts",
  data() {
    return {
      option: {}
    };
  },
  mounted() {
    this.getEchartData();
  },

  created() {
    this.option = {
      tooltip: {
        show: true
      },
      xAxis: {
        type: "category",
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "直接访问",
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar"
        }
      ]
    };
  },

  methods: {
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        myChart.setOption(this.option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        // 此处有两个错误, 因为作用环境的不同, myChart是无效化的
        // 应为 匿名函数对象的内存指针指向不同, 这个 removeEvent有可能是无效的
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
